<template>
    <div class="container">
        <div class="table">
            <div class="add-button">
            <el-button type="primary" @click="add">新增物品</el-button>
        </div>
        <el-table :data="dataList" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="80px">
            </el-table-column>
            <el-table-column prop="name" label="名称" >
            </el-table-column>
            <el-table-column prop="pickupLocation" label="拾取地点" >
            </el-table-column>
            <el-table-column prop="claimLocation" label="领取地点" >
            </el-table-column>
            <el-table-column prop="picture" label="图片" >
                <template slot-scope="scope">
                 <el-image :src="scope.row.picture" :preview-src-list="[scope.row.picture]" style="width: 50px; height: 50px" ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="creatTime" label="发布时间" >
            </el-table-column>
            <el-table-column  label="操作" width="200px">
                <template slot-scope="scope">
                <!-- <div class="btn-group"> -->
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
                <!-- </div> -->
            </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[5, 10, 20, 50]"
                :page-size=queryInfo.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
                </el-pagination>
        </div>
        </div>
        <el-dialog title="添加物品" :visible.sync="dialogVisible" width="50%" @close="addDilogClose">
            <div>
                <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="addRules">
                    <el-form-item label="物品名称" prop="name">
                        <el-input v-model="addForm.name" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="拾取地点" prop="pickupLocation">
                        <el-input v-model="addForm.pickupLocation" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="领取地点" prop="claimLocation">
                        <el-input v-model="addForm.claimLocation" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="picture">
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="addForm.picture" :src="addForm.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="addDilogClose">取 消</el-button>
                <el-button type="primary" @click="sureAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改物品" :visible.sync="editDialogVisible" width="50%" @close="editDilogClose">
            <div>
                <el-form ref="addFormRef" :model="editForm" label-width="80px" :rules="addRules">
                    <el-form-item label="物品名称" prop="name"> 
                        <el-input v-model="editForm.name" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="拾取地点" prop="pickupLocation">
                        <el-input v-model="editForm.pickupLocation" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="领取地点" prop="claimLocation">
                        <el-input v-model="editForm.claimLocation" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="picture">
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/files/upload"
                            :show-file-list="false"
                            :on-success="editHandleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="editForm.picture" :src="editForm.picture" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="editDilogClose">取 消</el-button>
                <el-button type="primary" @click="sureEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {formatTimestampWithOffset} from '@/utils/formatTimestampWithOffset.js'
export default {
    data(){
        return {
            queryInfo:{
                pageNum:1,
                pageSize:10
            },
            dataList:[],
            total:0,
            addForm:{},
            dialogVisible:false,
            editForm:{},
            editDialogVisible:false,
            addRules:{
                name:[{required:true,message:'物品名称不能为空',trigger:'blur'}],
                pickupLocation:[{required:true,message:'拾取地点不能为空',trigger:'blur'}],
                claimLocation:[{required:true,message:'领取地点不能为空',trigger:'blur'}],
                picture:[{required:true,message:'图片不能为空',trigger:'blur'}]
            }
        }
    },
    methods:{
        //获取所有通知新
        async getLostFounds(){
            const {data:res} = await this.$http.post("/getAllLostFoundList",this.queryInfo );
            if(res.code === 200){
                this.dataList = res.data;
                for(let item of this.dataList){
                    item.creatTime = formatTimestampWithOffset(item.creatTime);
                }
                this.total = res.count;
            }
        },
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getLostFounds();
        },
        handleCurrentChange(newPage){            
            this.queryInfo.pageNum = newPage;
            this.getLostFounds();
        },
        add(){
            // this.show = 1;
            this.dialogVisible = true;
        },
        handleAvatarSuccess(res){
            this.addForm.picture = res;
        },
        editHandleAvatarSuccess(res){
            this.editForm.picture = res;
        },
        async sureAdd(){
            this.$refs.addFormRef.validate(async valid=>{
                const {data:res} = await this.$http.post('/addLostFound',this.addForm)
                if(res.code === 200){
                    this.$message.success(res.message);
                    this.getLostFounds()
                }else{
                    this.$message.error(res.message);
                }
                this.dialogVisible = false;
                this.addForm = {};
            })
        },
        addDilogClose(){
            this.dialogVisible = false;
            this.addForm = {};
        },
        async edit(id){  
            const {data:res} = await this.$http.get('/getLostFound?id='+id);
            if(res.code === 200){
                this.editDialogVisible = true;
                this.editForm = res.data;
            } else {
                this.$message.error(res.message);
            }
        },
         sureEdit(){
            this.refs.addFormRef.validate(async valid=>{
                const {data:res} = await this.$http.post('/updateLostFound',this.editForm);
            if(res.code === 200){
                this.$message.success(res.message);
            }else{
                this.$message.error(res.message);
            }
            this.editDialogVisible = false;
            this.editForm = {};
            this.getLostFounds();
            })
        },
        editDilogClose(){
            this.editDialogVisible = false;
            this.editForm = {};
        },
        async del(id){
            const {data:res} = await this.$http.delete('/deleteLostFound?id='+id);
            if(res.code === 200){
                this.$message.success(res.message);
                this.getLostFounds();
            }else{
                this.$message.error(res.message);
            }
        }
    },
    created(){
        this.getLostFounds();
    }
}
</script>
<style lang="less" scoped>
.add-button{
    float: right;
    margin-bottom: 10px;
}
.el-table{
    align-items: center;
}
.pagination{
    float: right;
}
.btn-group{
    display: flex;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>